//  管理员列表
import { Table, Space, Button, Popconfirm, Modal, Form, Input, Select, Tree } from "antd";
import { useEffect, useState, useMemo} from 'react';
import type { ColumnsType } from 'antd/es/table';
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
import { getAdminList, removeAdmin, addAdmin, updateAdmin,IAdminParams } from "../../api/admin";
import menus, { IMenuProps } from "../../router/menu";
import type { TableRowSelection } from "antd/es/table/interface";
import { useAppSelector } from "../../store/hooks";
// 获取Tree组件树形结构的数据
interface ITreeData {
    key:string
    title:string
    children?:ITreeData[]
}

function getTreeData(menus:IMenuProps[]) {
    let arr:ITreeData[] = []
    menus.forEach(item => {
        let obj:ITreeData = {
            key:'',
            title:''
        }
        if(item.children) {
            obj = {
                key:item.keyid,
                title:item.label,
                children:getTreeData(item.children)
            }
        }else{
            obj = {
                key:item.keyid,
                title:item.label
            }
        }
        arr.push(obj)
    })
    return arr
}



type AdminListProps = {}
interface DataType {
    adminid:string;
    adminname:number;
    password:string;
    role:number;
    checkedKeys:any[]
}

export const AdminList = (props: AdminListProps) => {
    // 管理员列表数组
    const [adminList,setAdminList] = useState([])
    // 表格分页
    const [current,setCurrent] = useState(1) //页码
    const [pageSize,setPageSize] = useState(5) //每页显示个数
    // 添加管理员的弹窗设置
    const [addAdminVisible,setAddAdminVisible] = useState(false)
    // 对当前弹窗 使用类型add添加管理员 updata表示修改
    const [type,setType] = useState('add')
    // 在组件内部调用 外部声明的方法，得到 树形控件 的数据
    const treeData = getTreeData(menus)
    const [checkedKeys, setCheckedKeys] = useState(['0-0'])
    // 重置表单
    const [form] = Form.useForm()
    // 添加页面
    const onAdd = async(values: any) => {
        values.checkedKeys = checkedKeys
        await addAdmin(values)
        // 模态框消失， 重置表单，重置权限
        setAddAdminVisible(false) // 模态框消失
        form.setFieldsValue({ // 重置表单
        adminname: '', password: '', role: 1
        })
        setCheckedKeys(['0-0']) // 重置权限
        getAdminData() // 请求新的数据
    }
    // 更新页面数据
    const onUpdate = async (values:any) => {
        values.checkedKeys = checkedKeys
        await updateAdmin(values)
        setAddAdminVisible(false)
        form.setFieldsValue({
            adminname:'',password:'',role:1
        })
        setCheckedKeys(['0-0'])
        getAdminData()
    }

    // 获取管理员列表数据
    const getAdminData = async () => {
        let res = await getAdminList()
        setAdminList(res.data.data)
    }
    
    // 表格设置规范
    const colums:ColumnsType<DataType> = [
        {
            title: '序号',
            align: 'center',
            render: (text, record, index) => {
                // 展示序号根据页码计算
              return <span>{(current - 1) * pageSize + index + 1}</span>
            }
        },
        {
            title: '账户',
            align: 'center',
            dataIndex: 'adminname'
        },
        {
            title: '角色',
            align: 'center',
            dataIndex: 'role',
            render: text => {
              return text === 2 ? '超级管理员' : '管理员'
            }
        },
        {
            title:'操作',
            align:'center',
            render:(text,record,index) => {
                return(
                    <Space>
                        {/* 修改按钮 */}
                        <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => {
                            // 设置为修改
                            setType('update')
                            // 打开弹窗
                            setAddAdminVisible(true)
                            // 设置用户名和权限
                            form.setFieldsValue({
                                adminname:record.adminname,
                                role:record.role
                            })
                            // 权限树形结构
                            setCheckedKeys(record.checkedKeys)
                        }}></Button>
                        {/* 删除逻辑 */}
                        <Popconfirm
                            title="确定删除吗？"
                            onConfirm={async () => {
                                await removeAdmin({
                                    adminid:record.adminid
                                })
                                getAdminData()
                            }}
                            onCancel={() => {}}
                            okText="确定"
                            cancelText="再想想"
                        >

                            {/* 删除按钮 */}
                            <Button danger shape="circle" icon= {<DeleteOutlined />}></Button>
                        </Popconfirm>
                    </Space>
                )

            }
        }
    ]

    // 发数据请求
    useEffect(() => {
        getAdminData()
    },[])

    // 批量删除数据
    // 选中需要删除的数据
    const [selectedRowKeys,setSelectedRowKeys] = useState([])
    // 点击选中时的新数据
    const onSelectChange = (newSelectedRowKeys:any) => {
        setSelectedRowKeys(newSelectedRowKeys)
    }
    // 最左侧选择框选项配置的参数
    const rowSelection:TableRowSelection<DataType> = {
        selectedRowKeys,
        onChange:onSelectChange
    }
    const role = useAppSelector(state => state.user.role)
    // 事件监听 只要有一条数据 就可以进行批量删除
    const showDeleteMoreBtn = useMemo(() => {
        return selectedRowKeys.length > 0 && role === 2
    },[selectedRowKeys,role])

    return (
        <Space direction="vertical" style={{width:'100%'}}>
            <div style={{display:'flex'}}>
                {/* 添加按钮 */}
                <Button type="primary" onClick={() => {
                    setType('add')
                    setAddAdminVisible(true)
                }}>添加管理员</Button>
                {/* 批量删除按钮 */}
                {
                    // 只有超级管理员才能看到
                    showDeleteMoreBtn ? <Button type="primary" style={{
                        marginLeft:20
                    }}
                    onClick={() => {
                        const removeArr:any = []
                        selectedRowKeys.forEach(item => {
                            removeArr.push(removeAdmin({ adminid:item }))
                        })
                        Promise.all(removeArr).then((res) =>{
                            getAdminData()
                        })
                    }}
                    >
                        批量删除
                    </Button>
                    :
                    null
                }
            </div>
            <Table
            dataSource={adminList}
            columns={colums}
            bordered
            scroll={{y: document.body.offsetHeight - 300}}
            rowKey="adminid"
            rowSelection={rowSelection}
            // 分页设置
            pagination={{
                position:['bottomRight'],
                current,
                pageSize,
                onChange:(page,pageSize) => {
                    setCurrent(page)
                    setPageSize(pageSize)
                },
                showTotal:(total) => {
                    return <span>共有{total}条数据</span>
                },
                showQuickJumper:true,
                pageSizeOptions:[5,10,20,50]
            }}
            >
            </Table>

            {/* 添加管理员的弹窗 */}
            <Modal
                title={type === 'add' ? "添加管理员" : "更新管理员信息"}
                open={addAdminVisible}
                footer={null}
                onCancel={() => setAddAdminVisible(false)}
            >
                {/* 初始化管理员权限是1 */}
                <Form name="dynamic_rule" onFinish={type === 'add' ? onAdd : onUpdate} initialValues={{
                    role:1
                }} form={form}>
                    <Form.Item
                        name="adminname"
                        label="管理员账户"
                        rules={[
                            {
                                required:true,
                                message:'请输入管理员账户'
                            }
                        ]}
                    >
                        {/* 修改用户中不允许修改用户名 */}
                        <Input type="text" placeholder="管理员账户" disabled={type === 'update'} />
                    </Form.Item>
                    {/* 修改状态下允许不输入密码，不输入代表不修改 */}
                    {
                        type === 'add' ?
                        <Form.Item
                            name="password"
                            label="管理员密码"
                            rules={[
                            {
                                required: true,
                                message: '请输入管理员初始密码',
                            },
                            ]}
                        >
                            <Input type="password" placeholder="密码" />
                        </Form.Item> 
                        :
                        <Form.Item
                            name="password"
                            label="管理员密码"
                        >
                            <Input type="password" placeholder="留空表示不修改" />
                        </Form.Item>
                    }
                    
                    <Form.Item
                        name="role"
                        label="管理员角色"
                        rules={[
                        {
                            required: true,
                        },
                        ]}
                        >
                        <Select>
                            <Select.Option value={1}>管理员</Select.Option>
                            <Select.Option value={2}>超级管理员</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item
                        name="checkedkeys"
                        label="管理员权限"
                    >
                        <Tree
                            checkable
                            defaultExpandAll
                            checkedKeys={checkedKeys}
                            treeData={treeData}
                            onCheck={(checkedKeys: any) => { setCheckedKeys(checkedKeys) }}
                        />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                        {type === 'add' ? '确认添加' : '确认更新'}
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </Space>
    )
}